<template>
	<div>
		<el-form :inline="true"  style="padding-top: 10px;padding-left: 5px;">
			<el-form-item label="查询条件" prop="parameter" label-width="80px">
				<el-input v-model="parameter" style="width: 200px;" placeholder="请输入商品编码/商品名称"></el-input>
			</el-form-item>
			<el-form-item>
				<div style="float: left;">
					<el-button type="primary" @click="querybutton">查询</el-button>
					<el-button type="primary" @click="addstock">新增库存</el-button>
					<el-button type="primary" @click="showExport">导出报表</el-button>
				</div>
			</el-form-item>
			
		</el-form>
		<el-table :data="goods_stockData.slice((currentPage-1)*pagesize,currentPage*pagesize)" showOverflowTooltip :max-height="tabHeight" style="width: 100%" stripe border tooltip-effect="dark">
			<!--<el-table-column type="selection" width="50" > </el-table-column>-->
			<el-table-column prop="goods_id" label="商品编码" show-overflow-tooltip></el-table-column>
			<el-table-column prop="goods_name" label="商品名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="size_name" label="尺码名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="color_name" label="颜色名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="quantity" label="库存" show-overflow-tooltip></el-table-column>
			<el-table-column label="操作" width="160">
				<template slot-scope="scope">
					<el-button size="small" type="primary" @click="delServerEdit(scope.$index,scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.currentPage" :page-sizes="[5,10, 20, 50, 100]" :page-size="this.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="goods_stockData.length">
		</el-pagination>
		
		<el-dialog title="新增库存" :visible.sync="dialogUpdate" >
			<el-form :model="form" label-width="120px">
				<el-form-item label="商品名称：">
					<el-select clearable v-model="form.goods_name" @change="changegoods" filterable placeholder="请选择" >
						<el-option v-for="(item,index) in goodsData"  :key="index" :label="item.goods_name" :value="item.goods_name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="商品编码：" >
					<el-input disabled v-model="form.goods_id" style="width: 85%"></el-input>
				</el-form-item>
				<el-form-item label="尺码：">
					<el-select clearable v-model="form.size_id" placeholder="请选择" >
						<el-option v-for="item in sizeData"  :key="item.size_id" :label="item.size_name" :value="item.size_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="颜色：">
					<el-select clearable v-model="form.color_id" placeholder="请选择" >
						<el-option v-for="item in colorData"  :key="item.color_id" :label="item.color_name" :value="item.color_id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="库存：">
					<el-input v-model="form.quantity" style="width: 85%"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogUpdate = false">取 消</el-button>
				<el-button type="primary" @click="addButton">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { fetchList,selectallstock ,selectstockbyid,selectallsize,selectallcolor,insert_stock,delete_stock} from '../../api/goods.js'
	export default {
		data() {
			return {
				goods_stockData:[],
				parameter:'',
				tabHeight:'',
				dialogUpdate:false,
				form:{
					goods:null,
					goods_id:'',
					goods_name:'',
					size_id:'',
					color_id:'',
					quantity:0
				},
				sizeData:[],
				colorData:[],
				goodsData:[],
				currentPage: 1,
				pagesize: 20,
			};
		},
		methods:{
			handleSizeChange: function(size) {//改变页面展示多少条数据时调用的函数参数size 是你选择的数据 比如选5时  size就为5
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {//改变分页页码时调用的函数参数currentPage 是你选择的数据 比如选2时  则为第二页 currentPage 就是2
				this.currentPage = currentPage;
			},
			changegoods(val){
				for(let i=0;i<this.goodsData.length;i++){
					if(val == this.goodsData[i].goods_name){
						this.form.goods_id = this.goodsData[i].goods_id;
					}
				}
			},
			addstock(){
				this.dialogUpdate = true;
				this.form.goods_id = '';
				this.form.goods_name = '';
				this.form.size_id = '';
				this.form.color_id = '';
				this.form.quantity = 1;
			},
			querybutton(){
				if(this.parameter == ''){
					this.get_stockList();
				}else{
					this.goods_stockData = [];
					selectstockbyid({parameter:this.parameter}).then(response => {
					   if(response.code ==0 ){
					   	this.goods_stockData = response.data;
					   }
					})
				}
			},
			addButton(){
				if(this.form.goods_id == '' || this.form.goods_name == '' || this.form.color_id == '' || this.form.size_id == '' || this.form.quantity == ''){
					this.$notify({
					  title: '警告',
					  message: '请填写完整信息',
					  type: 'info',
					})
					return ;
				}
				
				insert_stock(this.form).then(() => {
				  this.$notify({
				    title: '成功',
				    message: '创建成功',
				    type: 'success',
				    duration: 2000
				  })
				})
				this.dialogUpdate = false;
				this.get_colorList();
			},
			get_sizeList() {
			  selectallsize().then(response => {
			     if(response.code ==0 ){
			    	this.sizeData = response.data;
			    }
			  })
			},
			get_colorList() {
			  selectallcolor().then(response => {
			    if(response.code ==0 ){
			    	this.colorData = response.data;
			    }
			  })
			},
			get_goodsList() {
				this.goodsData = [];
			  fetchList().then(response => {
				   if(response.code ==0 ){
				  	this.goodsData = response.data;
				}
			  })
			},
			get_stockList() {
			  selectallstock().then(response => {
				  if(response.code ==0 ){
				  	this.goods_stockData = response.data;
				  }
			  })
			},
			showServerEdit(index, row) {},
			delServerEdit(index, indexPath) {
				this.$confirm('是否确定删除'+indexPath.goods_name+'的这条库存记录?', '提示', {
					confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
				}).then(() => {
					// console.log(indexPath.ckey,'indexPath.ckey');
				delete_stock({ykey:indexPath.ykey}).then(() => {
				  this.$notify({
				    title: '成功',
				    message: '删除成功',
				    type: 'success'
				  })
				  this.get_colorList();
				})
				}).catch(() => {
					this.$message({
						type: 'info',message: '已取消删除'
					});
				});
			},
			showExport(){
				this.downloadLoading = true
			   require.ensure([], () => {
					const {
						export_json_to_excel
					} = require('../../vendor/Export2Excel')
					const tHeader = ['商品编码','商品名称','尺码','颜色','库存'];
					const filterVal = ['goods_id','goods_name','size_name','color_name','quantity'];
					const list = this.goods_stockData;
					const _data = this.formatJson(filterVal, list);
					export_json_to_excel(tHeader, _data, '库存表','库存表');
				
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
		
		},
		created(){
			this.tabHeight = document.documentElement.scrollHeight - 160 || document.body.scrollHeight -160;
			this.get_sizeList();
			this.get_colorList();
			this.get_goodsList();
			this.get_stockList();
		}
	}
</script>

<style>

</style>
